<template>
  <div class="tables">
    <MergeTable :data="tableData" />
  </div>
</template>
<style>
</style>
<script>
import { headerCellStyle, mergeTable } from "@/utils/utils.js";
import MergeTable from "@/components/BasisComponents/MergeTable.vue";
export default {
  components: { MergeTable },
  data() {
    return {
      headerCellStyle,
      headers: [],
      // 表格数据
      tableData: {},
    };
  },
  mounted() {
    this.getSpanList();
  },
  methods: {
    getSpanList() {
      const result = {
        code: 200,
        msg: "",
        data: {
          // 动态表头
          headers: [
            {
              key: "School",
              text: "学校",
            },
            {
              key: "Grade",
              text: "年级",
            },
            {
              key: "Class",
              text: "班级",
            },
            {
              key: "Name",
              text: "姓名",
            },
            {
              key: "Chinese",
              text: "语文",
            },
            {
              key: "Math",
              text: "数学",
            },
            {
              key: "English",
              text: "英语",
            },
          ],
          // 需要合并列
          mergeColumns: ["School", "Grade", "Class"],
          // 渲染数据
          body: [
            // 一年级
            {
              School: "第一小学",
              Grade: "1年级",
              Class: "1班",
              Name: "张三",
              Chinese: "90",
              Math: "100",
              English: "80",
            },
            {
              School: "第一小学",
              Grade: "1年级",
              Class: "1班",
              Name: "张伟",
              Chinese: "90",
              Math: "99",
              English: "89",
            },
            {
              School: "第一小学",
              Grade: "1年级",
              Class: "2班",
              Name: "李四",
              Chinese: "90",
              Math: "85",
              English: "80",
            },
            {
              School: "第一小学",
              Grade: "1年级",
              Class: "3班",
              Name: "王五",
              Chinese: "79",
              Math: "100",
              English: "80",
            },
            // 二年级
            {
              School: "第一小学",
              Grade: "2年级",
              Class: "1班",
              Name: "赵六",
              Chinese: "95",
              Math: "100",
              English: "80",
            },
            {
              School: "第一小学",
              Grade: "2年级",
              Class: "2班",
              Name: "钱八",
              Chinese: "98",
              Math: "85",
              English: "80",
            },
            {
              School: "第一小学",
              Grade: "2年级",
              Class: "3班",
              Name: "陈九",
              Chinese: "79",
              Math: "100",
              English: "100",
            },
            // 三年级
            {
              School: "第一小学",
              Grade: "3年级",
              Class: "1班",
              Name: "黄十",
              Chinese: "91",
              Math: "88",
              English: "80",
            },
            {
              School: "第一小学",
              Grade: "3年级",
              Class: "2班",
              Name: "魏一",
              Chinese: "90",
              Math: "86",
              English: "87",
            },
            {
              School: "第一小学",
              Grade: "3年级",
              Class: "3班",
              Name: "杨二",
              Chinese: "79",
              Math: "99",
              English: "80",
            },
            // 第二小学
            {
              School: "第二小学",
              Grade: "3年级",
              Class: "3班",
              Name: "袁零",
              Chinese: "79",
              Math: "99",
              English: "80",
            },
            {
              School: "第二小学",
              Grade: "2年级",
              Class: "4班",
              Name: "袁姗姗",
              Chinese: "79",
              Math: "89",
              English: "80",
            },
            {
              School: "合计",
              Grade: "合计",
              Class: "3班",
              Name: "袁姗姗",
              Chinese: "79",
              Math: "89",
              English: "80",
            },
          ],
          // 当前页
          currentPage: 1,
          // 当前页记录数
          pageSize: 20,
          // 总条数
          total: 20,
        },
      };
      const { code, msg, data } = result;
      if (code === 200) {
        const { headers, body } = data;
        const { mergeCells, colFields } = mergeTable(data);
        this.tableData = {
          headers,
          body,
          mergeCells,
          colFields,
        };
      }
    },
  },
};
</script>
<style lang="less">
.tables {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>
